<template>
	<view>
		<view class="part" v-for="(item,index) in list" :key="index" >
			<view class="msg" @click="goDetail(item.id)">
				<view class="big-msg">{{item.title}}</view>
				<view class="tag">家具体验</view>
			</view>
			<view @click="goDetail(item.id)" class="mark">{{item.intro}}</view>
			<view @click="goDetail(item.id)" class="cos-img"><image :src="item.images" class="cos-img" mode="widthFix"></image></view>
			<view class="sku-list">
				<scroll-view scroll-x="true" >
					<view class="scroll-box">
						<view class="list" v-for="(items,key) in item.sku" :key="key"  @click="goGoodDetail(items.store_sku_id)">
							<image :src="items.image[0]" class="sku-img"></image>
							<view class="name">{{items.name}}</view>
							<view class="money">{{'¥'+items.price}}</view>
						</view>

					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			var self = this;
			this.$request.request({
				url:'/sample/list',
				data:{
					p:1,
					per:1000000
				},
				success:function(res){
					if(res.code==200){
						var x = res.result;
						console.log(x)
						x.forEach((item,index)=>{
							x[index].images = self.$http_img(item.images);
							if(item.sku){
								item.sku.forEach((items,key)=>{
									items.image[0] = self.$http_img(items.image[0]);
									items.price = self.$money(items.price)
								})
							}
						})
						self.list = x;
						console.log(self.list)
						
					}else{
						
					}
				}
			});
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
				    url: '../model-room-detail/model-room-detail?id='+id
				});
			},
			goGoodDetail(id){
				uni.navigateTo({
				    url: '../../pages/local-store-item/local-store-item?id='+id
				});
			}
		}
	}
</script>

<style scoped>
	.part{
		margin-bottom: 40upx;
	}
.cos-img{
	width: 750upx;
}
.msg{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding:0 16upx;
	font-size: 14px;
	color: #333333;
	align-items: center;
}
.big-msg{
	font-size: 16px;
	max-width: 610upx;
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space:nowrap;
	font-weight: bold;
}	
.tag{
	width: 140upx;
	background-color: #c2ccd1;
	text-align: center;
	border-radius: 5upx;
	font-size: 12px;
	line-height: 19px;
	height: 19px;
}
.mark{
	overflow: hidden;
	text-overflow: ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical; 
	-webkit-line-clamp:2; 
	padding:0 16upx;
	font-size: 12px;
	color: #666666;
}
.sku-list{
	width: 750upx;
	padding: 10upx;
	box-sizing: border-box;
}
.scroll-box{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.list{
	width: 230upx;
	display: flex;
	flex-direction: column;
	margin-right: 20upx;
}
.sku-img{
	width: 230upx;
	height: 230upx;
}
.name{
	max-width: 230upx;
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space:nowrap;
	font-size: 12px;
	color: #000000;
}
.money{
	font-size: 12px;
	color: #d62b2b;
}
</style>
